---
import Layout from '../../layouts/Layout.astro';
import { getBlogPostBySlug, getRelatedPosts } from '../../lib/blog';
import { getProductsFromDB } from '../../lib/products';
import ProductCard from '../../components/ProductCard.astro';
import Breadcrumb from '../../components/Breadcrumb.astro';
import { marked } from 'marked';

const { slug } = Astro.params;
const post = await getBlogPostBySlug(slug!);

if (!post) {
  return Astro.redirect('/blog');
}

const related = await getRelatedPosts(post.category, post.slug, 3);

// Convert markdown to HTML, preserving <!-- products:... --> comments
marked.use({ breaks: false, gfm: true } as Parameters<typeof marked.use>[0]);
const htmlContent = await marked(post.content);

// Parse product block markers: <!-- products:brand:nike,model:dunk,limit:4 -->
// Returns content split into segments: { type: 'html' | 'products', value, products? }
interface ContentSegment {
  type: 'html' | 'products';
  html: string;
  products?: Awaited<ReturnType<typeof getProductsFromDB>>;
}

const productBlockRegex = /<!--\s*products:([^>]+?)\s*-->/g;
const segments: ContentSegment[] = [];
let lastIndex = 0;
let match: RegExpExecArray | null;

while ((match = productBlockRegex.exec(htmlContent)) !== null) {
  // Add preceding HTML
  if (match.index > lastIndex) {
    segments.push({ type: 'html', html: htmlContent.slice(lastIndex, match.index) });
  }

  // Parse params like "brand:nike,model:dunk,limit:4" or just "nike-dunk"
  const paramStr = match[1].trim();
  const opts: Record<string, string> = {};

  if (paramStr.includes(':')) {
    for (const part of paramStr.split(',')) {
      const [k, v] = part.split(':').map(s => s.trim());
      if (k && v) opts[k] = v;
    }
  } else {
    // Simple format: "nike-dunk" → treat as model search
    opts.model = paramStr;
  }

  try {
    const products = await getProductsFromDB({
      brand: opts.brand,
      model: opts.model,
      limit: parseInt(opts.limit || '4'),
      orderBy: (opts.sort as 'popular' | 'newest' | 'price_asc' | 'price_desc' | 'discount') || undefined,
    });
    segments.push({ type: 'products', html: '', products });
  } catch {
    // If product fetch fails, just skip the marker
  }

  lastIndex = match.index + match[0].length;
}

// Add remaining HTML
if (lastIndex < htmlContent.length) {
  segments.push({ type: 'html', html: htmlContent.slice(lastIndex) });
}

const categoryMap: Record<string, string> = {
  guides: 'Koopgidsen',
  deals: 'Deals',
  comparisons: 'Vergelijkingen',
  trends: 'Trends',
};

const wordCount = post.content.replace(/<!--[^>]+-->/g, '').replace(/[#*_\[\]()]/g, '').split(/\s+/).length;
const readingTime = Math.max(1, Math.round(wordCount / 200));

function formatDate(d: string | null) {
  if (!d) return '';
  return new Date(d).toLocaleDateString('nl-NL', { day: 'numeric', month: 'long', year: 'numeric' });
}

const canonicalUrl = `https://sneakerpicks.nl/blog/${post.slug}`;

const jsonLd = {
  '@context': 'https://schema.org',
  '@type': 'Article',
  inLanguage: 'nl-NL',
  headline: post.title,
  description: post.meta_description || post.excerpt,
  image: post.cover_image,
  author: { '@type': 'Organization', name: 'SneakerPicks', url: 'https://sneakerpicks.nl' },
  publisher: {
    '@type': 'Organization',
    name: 'SneakerPicks',
    url: 'https://sneakerpicks.nl',
    logo: { '@type': 'ImageObject', url: 'https://sneakerpicks.nl/logo.svg' },
  },
  datePublished: post.published_at,
  dateModified: post.updated_at,
  mainEntityOfPage: canonicalUrl,
};

const breadcrumbLd = {
  '@context': 'https://schema.org',
  '@type': 'BreadcrumbList',
  inLanguage: 'nl-NL',
  itemListElement: [
    { '@type': 'ListItem', position: 1, name: 'Home', item: 'https://sneakerpicks.nl/' },
    { '@type': 'ListItem', position: 2, name: 'Blog', item: 'https://sneakerpicks.nl/blog' },
    { '@type': 'ListItem', position: 3, name: post.title },
  ],
};
---

<Layout
  title={post.meta_title || `${post.title} | SneakerPicks Blog`}
  description={post.meta_description || post.excerpt || ''}
  ogImage={post.cover_image}
>
  <script type="application/ld+json" set:html={JSON.stringify(jsonLd)} />
  <script type="application/ld+json" set:html={JSON.stringify(breadcrumbLd)} />

  <main class="mx-auto max-w-4xl px-4 py-10 sm:px-6">
    <Breadcrumb items={[
      { label: 'Home', href: '/' },
      { label: 'Blog', href: '/blog' },
      { label: categoryMap[post.category] || post.category, href: `/blog?category=${post.category}` },
      { label: post.title },
    ]} />

    <!-- Cover image -->
    {post.cover_image && (
      <div class="mb-8 overflow-hidden rounded-2xl">
        <img src={post.cover_image} alt={post.title} class="w-full object-cover" width="1200" height="630" loading="eager" fetchpriority="high" decoding="async" />
      </div>
    )}

    <!-- Meta -->
    <div class="mb-8">
      <div class="mb-3 flex flex-wrap items-center gap-3">
        <span class="rounded-full bg-accent/10 px-3 py-1 text-xs font-semibold text-accent">
          {categoryMap[post.category] || post.category}
        </span>
        <span class="text-sm text-text-secondary">{formatDate(post.published_at)}</span>
        <span class="text-sm text-text-secondary">· {readingTime} min leestijd</span>
      </div>
      <h1 class="text-3xl font-black tracking-tight sm:text-4xl">{post.title}</h1>
    </div>

    <!-- Content with product blocks -->
    <article class="blog-article prose prose-invert max-w-none prose-headings:font-bold prose-a:text-accent prose-a:no-underline hover:prose-a:underline prose-strong:text-text prose-li:text-text-secondary prose-p:text-text-secondary">
      {segments.map((seg) => (
        seg.type === 'html' ? (
          <Fragment set:html={seg.html} />
        ) : seg.products && seg.products.length > 0 ? (
          <div class="not-prose my-8">
            <div class="grid grid-cols-2 gap-3 sm:gap-4 lg:grid-cols-4">
              {seg.products.map((sneaker, i) => (
                <ProductCard sneaker={sneaker} index={i} />
              ))}
            </div>
          </div>
        ) : null
      ))}
    </article>

    <!-- Share -->
    <div class="mt-10 flex flex-wrap items-center gap-3 border-t border-border/50 pt-6">
      <span class="text-sm font-semibold text-text-secondary">Deel dit artikel:</span>
      <a
        href={`https://twitter.com/intent/tweet?url=${encodeURIComponent(canonicalUrl)}&text=${encodeURIComponent(post.title)}`}
        target="_blank"
        rel="noopener"
        class="rounded-lg bg-bg-elevated px-3 py-1.5 text-sm text-text-secondary hover:text-text transition-colors"
      >
        𝕏 Twitter
      </a>
      <a
        href={`https://wa.me/?text=${encodeURIComponent(post.title + ' ' + canonicalUrl)}`}
        target="_blank"
        rel="noopener"
        class="rounded-lg bg-bg-elevated px-3 py-1.5 text-sm text-text-secondary hover:text-text transition-colors"
      >
        WhatsApp
      </a>
      <button
        onclick={`navigator.clipboard.writeText('${canonicalUrl}');this.textContent='Gekopieerd!'`}
        class="rounded-lg bg-bg-elevated px-3 py-1.5 text-sm text-text-secondary hover:text-text transition-colors"
      >
        🔗 Kopieer link
      </button>
    </div>

    <!-- Related -->
    {related.length > 0 && (
      <div class="mt-12">
        <h2 class="mb-6 text-2xl font-bold">Gerelateerde artikelen</h2>
        <div class="grid gap-4 sm:grid-cols-3">
          {related.map((r) => (
            <a href={`/blog/${r.slug}`} class="group rounded-2xl border border-border/50 bg-bg-card p-4 transition-all hover:border-accent/50">
              {r.cover_image && (
                <div class="mb-3 flex h-40 items-center justify-center overflow-hidden rounded-xl bg-bg-elevated">
                  <img src={r.cover_image} alt={r.title} class="max-h-full max-w-full object-contain" width="400" height="225" loading="lazy" decoding="async" />
                </div>
              )}
              <h3 class="text-sm font-bold group-hover:text-accent transition-colors">{r.title}</h3>
              <span class="mt-1 block text-xs text-text-secondary">{formatDate(r.published_at)}</span>
            </a>
          ))}
        </div>
      </div>
    )}
  </main>
</Layout>